<template>
  <PageWrapper
    title="name"
    subTitle="这是二级标题，对一级标题的描述..."
    :avatar="{ src: 'https://avatars1.githubusercontent.com/u/8186664?s=460&v=4' }"
    contentFullHeight
    contentBackground
  >
    <PageFooter>
      <template #left>left</template>
      <template #right>right</template>
    </PageFooter>
    <!-- 普通容器包裹 -->
    <CollapseContainer title="java 代码块(可编辑)">
      <CodeEditor :value="javaCode" />
    </CollapseContainer>

    <!-- 代码块建议使用 滚动容器包裹 -->
    <CollapseContainer class="mt-5" title="Json 代码块(只读)">
      <div class="h-100">
        <ScrollContainer class="p-3">
          <CodeEditor :value="testData" :readonly="true" />
        </ScrollContainer>
      </div>
    </CollapseContainer>

    <!-- 笔记 -->
    <CollapseContainer class="mt-5" title="JsonPreview">
      <markdown-viewer :value="getDoc()" />
    </CollapseContainer>

    <!-- 源码 -->
    <CollapseContainer class="mt-5" title="源码">
      <markdown-viewer :value="getSource()" />
    </CollapseContainer>
  </PageWrapper>
</template>
<script lang="ts" setup>
  import { MarkdownViewer } from '@/components/Markdown';
  import { CollapseContainer, ScrollContainer } from '@/components/Container';

  // 引入 代码块 组件
  import { PageWrapper, PageFooter } from '@/components/Page';
  // 导入完整 json 代码
  import testData from './testData.json';

  // 解构json节点

  const javaCode = `
import lombok.Data;

@data
public class User{
  private int id;
  private String name;
  private int age;
}
`;
</script>

<script lang="ts">
  function getDoc() {
    return `


* CodeEditor 封装的是 codemirror 插件, 可读、可编辑的代码块功能
* vben 对 codemirror 只做了简单的封装，如果需要深度使用，可自行扩展
* 官网: <a href="https://doc.vvbin.cn/components/code-editor.html" target="_blank">vben CodeEditor 官方文档</a>


### 常用属性

| 方法名 |  类型 | 说明 |
| :--- | :--- | :--- |
| :value | (duration:number=500)  | 滚动到底部 |
| mode | string   | 代码类型，不设置时会自动推断。默认只支持 'application/json','htmlmixed','javascript' |
| readonly | boolean  | 是否只读 |


`;
  }

  function getSource() {
    return `


\`\`\`html
\<template\>
  <!-- 普通容器包裹 -->
  <CollapseContainer class="mt-5" title="java 代码块(可编辑)">
    <CodeEditor :value="javaCode" />
  </CollapseContainer>

  <!-- 代码块建议使用 滚动容器包裹 -->
  <CollapseContainer class="mt-5" title="Json 代码块(只读">
    <div class="h-100">
      <ScrollContainer class="p-3">
        <CodeEditor :value="testData" :readonly="true" />
      </ScrollContainer>
    </div>
  </CollapseContainer>

\</template\>

\<script lang="ts" setup\>
  import { MarkdownViewer } from '@/components/Markdown';
  import { CollapseContainer, ScrollContainer } from '@/components/Container';

  // 引入 代码块 组件
  import { CodeEditor } from '@/components/CodeEditor';
  // 导入完整 json 代码
  import testData from './testData.json';

  // 解构json节点

  const javaCode = \`
import lombok.Data;

@data
public class User{
  private int id;
  private String name;
  private int age;
}
\`;
\</script\>
\`\`\`

  `;
  }
</script>
